﻿@section head{
    <style>
        .checkbox-margin {
            margin-left: 22px;
            width: 80px;
            word-break: break-all;
        }

        /*数据表格内容换行显示*/
        .layui-table-cell {
            height: auto;
            /*空白会被浏览器忽略*/
            white-space: normal;
            /*允许长单词换行到下一行*/
            word-wrap: break-word;
            /*允许在单词内换行*/
            word-break: break-all;
        }
        /*shaobo自定义*/
        .layui-table-click {
            color: #1b8fe6 !important;
            background-color: #ffffff;
        }
    </style>
}
@section body{
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="tab1" lay-filter="title"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="checkAll" id="btnAll" onclick="checkAll();">全选</button>
                        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="checkNoAll" id="btnOnAll" onclick="checkNoAll();">反选</button>
                        @if (ViewBag.CoreRolePowerEdit)
                        {
                            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="update" id="btn1" onclick="checkAlert();">更新</button>
                        }
                    </div>
                    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
                </div>
            </div>
        </div>
    </div>
}
@section script {
    <script>
        var $;
        var view;
        var checkRow;
        var treeGrid = null, tableId = 'treeTable';
        layui.use(['table', 'jquery', 'view', 'treeGrid'], function () {
            var table = layui.table;
            $ = layui.$,
                treeGrid = layui.treeGrid,//很重要
                view = layui.view;

            ptable = treeGrid.render({
                id: tableId
                , elem: '#' + tableId
                //, url: '../layuiadmin/json/treeGrid/treeData.json'
                , url: 'GetRolePowerJSON'
                , cellMinWidth: 100//单元格最小宽度
                , idField: 'ID'//必須字段
                , treeId: 'ID'//树形id字段名称
                , treeUpId: 'ParentID'//树形父id字段名称
                , treeShowName: 'GroupName'//以树形式显示的字段
                , heightRemove: [".dHead", 90]//不计算的高度,表格设定的是固定高度，此项不生效
                , height: 'full-20'
                , isFilter: false
                , iconOpen: false//是否显示图标【默认显示】
                , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
                , loading: true
                , method: 'post'
                , isPage: false
                , cols: [[
                    /*                    { type: 'numbers' }*/
                    { field: 'GroupName', width: 170, title: '菜单' }
                    , {
                        field: 'Powers', title: '权限', width: 0,
                        templet: function (d) {
                            var str = "";
                            for (var i = 0; i < d.Powers.length; i++) {
                                str += '<input type="checkbox" name="items" value="' + d.Powers[i].ID + '" lay-skin="primary" title="' + d.Powers[i].Title + '">';
                            }
                            return str;
                        }
                    }
                ]]
                , where: { roleID: checkRow, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                , done: function (res, curr, count) {
                    var arr = res.msg.split(',');
                    //取msg存放的权限ID，遍历选中
                    var cweek = $('input[type="checkbox"]');
                    //span加左边距
                    $('.layui-form-checkbox span').addClass('checkbox-margin');
                    $.each(cweek, function (i) {
                        for (var i = 0; i < arr.length; i++) {

                            if ($(this).val() === arr[i]) {
                                $(this).next('.layui-form-checkbox').addClass('layui-form-checked');
                            }
                        }
                    });
                }
            });

            //渲染表格1
            table.render({
                elem: '#tab1'
                , url: 'GetRoleListJSON'//数据接口
                , autoSort: false//禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
                , height: 'full-65' //高度最大化减去差值
                , method: "post"
                , cols: [[
                    { type: 'numbers' },
                    { field: 'Name', width: 0, title: '角色名称', event: 'setSign' }
                ]]
                , limit: 1000
                , where: { __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                , done: function (res, curr, count) {
                    //选择第一行
                    $("[data-index='0']").click();
                    $("[data-index='0']").addClass('layui-table-click');
                }
            });
            //监听tab1行单击事件
            table.on('row(title)', function (obj) {

                checkRow = obj.data.ID;//记录选中的ID
                //请求登入接口
                view.req({
                    url: 'GetRolePowerJSON' //实际使用请改成服务端真实接口
                    , data: { roleID: checkRow, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                    , type: "post"
                    , dataType: "json"
                    , done: function (res) {
                        var arr = res.msg.split(',');

                        //先清空
                        checkNoAll();
                        //取msg存放的权限ID，遍历选中
                        var cweek = $('input[type="checkbox"]');
                        //span加左边距
                        $('.layui-form-checkbox span').addClass('checkbox-margin');
                        $.each(cweek, function (i) {
                            for (var i = 0; i < arr.length; i++) {

                                if ($(this).val() === arr[i]) {
                                    $(this).next('.layui-form-checkbox').addClass('layui-form-checked');
                                }
                            }
                        });
                    }
                });

            });
        });

        function checkAll() {//实现全选
            $('input[type="checkbox"]').next('.layui-form-checkbox').addClass('layui-form-checked');
        };
        function checkNoAll() {//反选
            $('input[type="checkbox"]').next('.layui-form-checkbox').removeClass('layui-form-checked');
        };

        function checkAlert() {//获取全部选中的value

            var cweek = $('.layui-form-checked');
            //遍历ID，放到数组中
            var powers = new Array();

            $.each(cweek, function (i) {
                //返回上一个兄弟节点，不是所有的兄弟节点
                powers[i] = $(this).prev('input[type="checkbox"]').val();
            });

            //请求登入接口
            view.req({
                url: 'EditRolePower' //实际使用请改成服务端真实接口
                , data: { powers: powers, roleID: checkRow, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                , type: "post"
                , dataType: "json"
                , done: function (res) {
                    if (res.codeIndex === 1) {
                        layer.msg('更新' + res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: 't',
                            anim: 6
                        });
                    }

                }
            });
        };

        function check() {//选中14，15
            var cweek = $('input[type="checkbox"]');
            $.each(cweek, function (i) {
                if ($(this).val() === '14' || $(this).val() === '15') {
                    $(this).next('.layui-form-checkbox').addClass('layui-form-checked');
                }
            });
        };


    </script>
}